<template>
  <div>
    <ul v-for="(item, index) in data" :key="index" class="card" :style="`background-color: ${colors[Math.floor(Math.random()*colors.length)]}`">
      <li v-for="(ite, ind) in item" :key="ind">
        <div class="card-item">
          <div>{{ ite.key }}.《{{ ite.name }}》({{ ite.author }})</div>
          <div class="card-comment">— —【“{{ite.comment}}”】</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import dataConfig from "./config";

// 分组
const data = dataConfig.pyBookTop250;
const num = 10; // 每25一组
const list = [];
data.forEach((item, index) => {
  const page = Math.floor(index / num);
  if (!list[page]) {
    list[page] = [];
  }
  list[page].push({
    ...item,
  });
});
// console.log(list);

export default {
  data() {
    return {
      data: list,
      colors: [
        '#ff8b8b',
        '#148f95',
        '#62bfac',
        '#e54a4b',
        '#167b80',
        '#075a5b',
        '#776ea7',
        '#0dbcd6',
        '#9c9cdd',
        '#1ec8a8',
      ]
    };
  },
};
</script>

<style lang="less" scoped>
.card {
  padding: 10px;
  color: #ffffff;
  width: 500px;

  .card-comment {
    text-align: right;
  }
}
.c1 {
  background-color: #ff8b8b;
}
</style>
